<!DocType html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
            integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
            crossorigin="anonymous"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


    <script src="../../js/vue.js"></script>
    <script src="../../js/vueCustomComponent.js"></script>
</head>
<body>

<div id="blog-post" class="">
    <blog-post
            v-for="post1 in posts"
            v-bind:title="post1.title"
            v-bind:content="post1.content + post1.title"
    ></blog-post>

    <blog-post title="staticTitle" content="staticContent"></blog-post>
</div>

<div class=""> </div>


<br>
<div id="customInput">
    <custom-input v-model="searchText"></custom-input>
</div>

<br>

<div id="customModel">
    <base-checkbox v-model="lovingVue"></base-checkbox>
</div>

<script>

    let vm1 = new Vue({
        el: '#blog-post',
        data: {
            posts: [
                {title: 'title1', content: 'content1'},
                {title: 'title2', content: 'content2'},
            ]
        }
    })

    Vue.component('custom-input', {
        props: ['value'],
        template: `
            <input
                    v-bind:value="value"
                    v-on:input="$emit('input', $event.target.value)"
            >
        `
    })

    let vm2 = new Vue({
        el: '#customInput',
        data: {
            searchText: ''
        }
    })

st_


    Vue.component('base-checkbox', {
        model: {
            prop: 'checked',
            event: 'change'
        },
        props: {
            checked: Boolean
        },
        template: `
            <input
                    type="checkbox"
                    v-bind:checked="checked"
                    v-on:change="$emit('change', $event.target.checked)"
            >
        `
    })

    let vm3 = new Vue({
        el: '#customModel',
        data: {
            lovingVue: ''
        }
    })

</script>

<style>
    .red {
        color: #e66465;
    }
</style>

</body>
</html>